<template>
  <div>
    <div class="custom-tag">
      <el-check-tag checked>一级标签</el-check-tag>
    </div>
    <el-radio-group
      @change="clickFirstCategoryChange"
      v-model="radio1"
      size="large"
    >
      <el-radio-button label="全部" value="" />
      <div v-for="(category, index) in categorys" :key="index">
        <el-radio-button
          :label="category.classificationFirst.title"
          :value="category.classificationFirst.id"
          @click="clickFirstCategory(category.classificationSecondList)"
        />
      </div>
    </el-radio-group>
    <div class="custom-tag">
      <el-check-tag checked>二级标签</el-check-tag>
    </div>
    <el-radio-group
      v-if="categorys2 != null"
      v-model="radio2"
      size="large"
      @change="clickSecondCategoryChange"
    >
      <el-radio-button label="全部" value="" />
      <div v-for="(category, index) in categorys2" :key="index">
        <el-radio-button :label="category.title" :value="category.id" />
      </div>
    </el-radio-group>

    <div class="toolbar">
      <div class="custom-tag">
        <el-check-tag checked>搜索框</el-check-tag>
      </div>
      <el-input
        v-model="search.title"
        style="width: 240px"
        placeholder="请输入商品名"
        clearable
        :prefix-icon="Search"
        @change="onSearchChange"
      />
    </div>
  </div>

  <div class="product-list">
    <ProductItem
      v-for="(product, index) in products"
      :key="index"
      :product="product"
      @click="navigateToProduct(product.id)"
    />

    <div class="pagination">
      <el-pagination
        :page-sizes="[2, 5, 20, 40, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        :default-page-size="pagination.size"
        @change="onPaginationChange"
      />
    </div>
  </div>

  <div class="favoriteProduct">
    <div class="product-list">
      <h2>猜你喜欢</h2>
      <ProductItem
        v-for="(product, index) in favoriteProducts"
        :key="index"
        :product="product"
        @click="navigateToProduct(product.id)"
      />
    </div>
  </div>
</template>

<script setup>
import ProductItem from "@/components/ProductItem.vue";
import { categoryPage } from "@/apis/admin/category";
import { thingPage } from "@/apis/thing";
import { reactive, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { Search } from "@element-plus/icons-vue";

import {
  getAllCategory,
  firstDeleteByUserId,
  firstAdd,
  firstEdit,
  secondDeleteByUserId,
  secondAdd,
  secondEdit,
} from "@/apis/admin/category";

// 路由
const router = useRouter();
// 数据
const products = ref([]);

// 实现跳转商品详情页,传递路径参数
const navigateToProduct = (productId) => {
  router.push({
    name: "productdetail",
    params: { productId: productId },
  });

  // router.push(`/product/${productId}`);
};

// 分页
const pagination = reactive({
  page: 1,
  size: 10,
  total: 0,
});

// 分页改变函数
const onPaginationChange = async (currentPage, pageSize) => {
  pagination.page = currentPage;
  pagination.size = pageSize;
  await getPage();
};

// 搜索输入框搜索条件
const search = reactive({
  title: "",
  classificationFirstId: "",
  classificationSecondId: "",
});

// 过滤对应的条件
const filter = ref({});

// 存储排序字段
const orders = reactive({
  column: "id",
  isAsc: true,
});

const getPage = () => {
  categoryPage(search, pagination.page, pagination.size).then((result) => {
    products.value = result.data.records;
    pagination.total = result.data.total;
    // console.log(result.data.records);
  });
};

// 数据
const favoriteProducts = ref([]);

// 猜你喜欢模块
const getFavoritePage = () => {
  orders.column = "collect_count";
  orders.isAsc = true;
  thingPage(
    {
      filter: filter,
      search: search,
      orders: [orders],
    },
    1,
    4
  ).then((result) => {
    favoriteProducts.value = result.data.records;
    pagination.total = result.data.total;
    // console.log(result.data.records);
  });
};

const radio1 = ref("全部");
const radio2 = ref("全部");
const categorys = ref();
const categorys2 = ref();
// 页面加载时执行
onMounted(async () => {
  getPage();

  getFavoritePage();

  const result = await getAllCategory();
  categorys.value = result.data;
  console.log(result.data);
});

// 点击后弹出数据
const clickFirstCategory = (data) => {
  // console.log(radio1.value);
  categorys2.value = data;
};

// 选择框发生改变
const onSearchChange = () => {
  getPage();

  // console.log(search);
};

const clickFirstCategoryChange = (value) => {
  // console.log(radio1.value);
  search.classificationFirstId = value;
  getPage();
  // console.log(value);
};

const clickSecondCategoryChange = (value) => {
  // console.log(radio1.value);
  search.classificationSecondId = value;
  getPage();
  // console.log(value);
  // console.log(number);
};
</script>

<style scoped>
.product-list {
  display: flex;
  justify-content: space-around; /* 每个项目周围的空间相等 */
  /* flex-wrap: nowrap; 同上，根据实际情况调整 */
  flex-wrap: wrap; /*允许换行*/
  /* gap: 20px; 在Flex项目之间添加水平和垂直间距 */
}

.pagination {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
}
.custom-tag {
  padding: 10px 0;
}

.favoriteProduct {
  background-color: #ecf5ff;
  margin-top: 40px;
}
</style>
